<template>
	<el-dialog
		title="会员登录IP详情"
		:visible.sync="dialogTableVisible"
		width="957.5px"
	>
		<el-descriptions :column="4">
			<el-descriptions-item :label="$t('member.login_ip_member')">
				{{ searchData.loginIp }}
			</el-descriptions-item>
			<el-descriptions-item :label="$t('member.ip_attribution')">
				{{ searchData.ipAttribution }}
			</el-descriptions-item>
		</el-descriptions>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:data="dataList"
			style="width: 100%"
			:max-height="tableHeight"
			:header-cell-style="getRowClass"
			@sort-change="changeTableSort"
			highlight-current-row
		>
			<el-table-column
				type="index"
				align="center"
				:label="$t('common.serial_number')"
				width="50"
			>
				<template slot-scope="scope">
					<span>{{ getSerialNum(scope.$index) }}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="merchantId"
				align="center"
				:label="`${$t('common.belong_merchant')}`"
				width="100"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ merchantFilter(scope.row.merchantId + '') }}
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				:label="`${$t('member.login_account')}`"
				width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.userName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="registerTime"
				align="center"
				:label="`${$t('common.register_time')}`"
				width="200"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.registerTime || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="registerIp"
				align="center"
				:label="$t('member.register_ip')"
				width="100"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.registerIp || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="registerDeviceNo"
				align="center"
				:label="`${$t('risk.terminal_info_register')}`"
				show-overflow-tooltip
				width="160"
			>
				<template slot-scope="scope">
					{{ scope.row.registerDeviceNo || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="deviceNo"
				align="center"
				:label="`${$t('member.near_login_client_device_nunber')}`"
				width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.deviceNo || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="loginTime"
				align="center"
				:label="`${$t('member.near_login_time')}`"
				width="190"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.loginTime || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="loginError"
				align="center"
				:label="`${$t('common.remark')}`"
				show-overflow-tooltip
				width="180"
			>
				<template slot-scope="scope">
					{{ scope.row.loginError || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			:current-page.sync="pageNum"
			background
			class="pagination"
			layout="total, sizes,prev, pager, next, jumper"
			:page-size="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		value: {
			type: Boolean,
			default: false
		},
		searchData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			dialogTableVisible: false,
			tableHeight: 500,
			dataList: []
		}
	},
	watch: {
		value(val) {
			this.dialogTableVisible = val
			if (val) {
				this.init()
			}
		},
		dialogTableVisible(val) {
			this.$emit('input', val)
		}
	},
	methods: {
		init() {
			const params = {
				...this.searchData,
				...this.getParams(params),
				isQueryCount: false
			}
			delete params.ipAttribution
			this.loading = true
			this.$api
				.memberLoginLogDetails(params)
				.then((res) => {
					this.loading = false
					const { code, msg } = res
					if (res && code === 200) {
						const data = res.data
						this.dataList =
							(data &&
								data.record &&
								data.record.length &&
								Object.freeze(data.record)) ||
							[]
						this.total = (data && data.totalRecord) || 0
					} else {
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.init()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.init()
		}
	}
}
</script>

<style scoped lang="scss">
.pagination {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
.labelContent {
	flex: 0.5;
}
</style>
